.@{mi-canvas} {
	&-thickness {
		.@{poptip-prefix-cls} {
			&-body {
				padding: 0;
			}
		}

		&-container {
			.flex();
		}

		&-wrapper {
			display: flex;
			text-align: start;
			min-width: 96px;
			width: 100%;
			overflow: hidden;
		}

		&-controls {
			.flex(flex-start, flex-start);
			padding: 24px 32px;

			&-column {
				.flex(flex-start, center);
				flex-direction: column;

				label {
					.flex(center, flex-start);
					height: 32px;
					margin: 8px 0;
					font-size: 12px;
					white-space: nowrap;
				}
			}

			&-slider {
				margin-left: 16px;
				width: 200px;

				.@{slider-prefix-cls} {
					width: 100%;
					height: 32px;
					margin: 8px 0;
					.flex();

					&-wrap,
					&-bar {
						height: 8px;
						.border-radius(2);
					}

					&-button {
						&-wrap {
							width: 16px;
							height: 16px;
							top: -5px;
						}
						width: 16px;
						height: 16px;
						transition: none;
						transform: scale(1);

						&:hover {
							transform: none;
						}
					}
				}
			}
		}

		&-preview {
			width: 124px;
			height: 100%;
			background-image: linear-gradient(45deg, #CCC 26%, transparent 25%, transparent 75%, #CCC 75%, #CCC), linear-gradient(45deg, #CCC 26%, transparent 25%, transparent 75%, #CCC 75%, #CCC);
			background-position: 0 0, 6px 6px;
			background-size: 12px 12px;
			bottom: 0;
			.flex();
			position: relative;
			top: 0;
			border-radius: 0 16px 16px 0;

			&-brush {
				border-radius: 50%;
				margin: auto;
			}
		}

		&&-mobile {
			.@{mi-canvas} {
				&-thickness {
					&-controls {
						padding: 32px 8px;
					}
				}
			}
		}
	}
}
